<template>
	<div  ref="wrapper">
    <div class="content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default{
		name:'Scroll',
		props:{
			probeType:{
				type:Number ,
				default:0
			},
				pullUpLoad: {
					type:Boolean,
					default: false
				},
				// observeDOM:{
				// 	type:Boolean,
				// 	default:false
				// }
		},
		data(){
			return{
				scroll:null
			}
		},
		mounted() {			 
			//1.创建BScroll对象
			 this.scroll = new BScroll(this.$refs.wrapper,{
				 click:true,				 
				 //从外面把数值传进来，不要写死
				 probeType: this.probeType, 	 
				 pullUpLoad: this.pullUpLoad,
				 // observeDOM: this.observeDOM
			 })
			 //2.监听滚动的位置
				if(this.probeType === 2 || this.probeType ===3) { //性能问题： 判断只有等于2或者3的时候才能监听滚动
					this.scroll.on('scroll', (position) => {
						this.$emit('scroll', position)
					})
				}
				
				//3.监听scroll滚动到底部
				if(this.pullUpLoad) {
					this.scroll.on('pullingUp', () => {
						this.$emit('pullingUp')
					})
				}
				// this.scroll.on('pullingUp', () => {
				// 	this.$emit('pullingUp')
				// })
				// if(this.pullUpLoad) {
				// 	this.scroll.on('pullUpLoad', () => {
				// 		this.$emit('pullingUp')
				// 	})
				// }
				
		},
		methods:{
		//封装一个方法返回顶部
		
		/*  加上 this.scroll && 是为了判断是scroll是否有值，
				如果有值就执行后面的 this.scroll.scrollTo(x, y, time)
				如果 scroll 里面没有值就不执行
		*/
			scrollTo(x, y, time=300) {
			this.scroll && this.scroll.scrollTo(x, y, time)
			},
			finishPullUp(){
			this.scroll &&	this.scroll.finishPullUp()
			},
			//scroll计算高度后在刷新一次
			refresh(){
			 this.srcoll &&	this.scroll.refresh()
			},
			getScrollY(){
				return this.scroll ? this.scroll.y : 0
			}
		}
	}
</script>

<style scoped>

</style>
